<template>
	<view>
		<u-navbar title="任务指派人" :title-size="36"  :title-width="500" title-color="#fff" back-icon-name="arrow-left" back-icon-color="#fff"  :background="background" :custom-back="goBack">
		</u-navbar>
		<view class="content">
			<u-search   @change="searchV" v-model="keyword"  :show-action="false"></u-search>
			<ul class="selList">
				<scroll-view scroll-y="true"  style="height: 1100rpx;">
				  <li v-for="(item,index) in personList" :key="index" @click="checkPerson(item,personList)" :class="item.checked == true ? 'active':''">
					<img src="../../../assets/images/home/avatar.png" /><span>{{item.name}}</span>
					<u-icon name="checkmark" color="rgb(39, 127, 230)" size="30" v-show="item.checked == true"></u-icon>
				  </li>
			  </scroll-view>
			</ul>
			<u-button type="primary" shape="circle" @click="addUser">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'policeCon',
		onLoad(option) {
		 console.log(JSON.parse(decodeURIComponent(option.list)))
		 this.personList = JSON.parse(decodeURIComponent(option.list))
		},
		data() {
			return {
				background: {
					backgroundColor: '#4299f7',
				},
				personList:[],
				avList:[],
				list:[],
				keyword: ''
			};
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			checkPerson(item,personList) {
				for (var i in personList) {
					personList[i].checked = false
				}
				item.checked = !item.checked;
				// this.list = item
				// console.log(this.list)
			},
			// userAll(){
			// 	this.$api.reqApi.userListAll().then(res => {
			// 		if(res.code == 200){
			// 			this.personList = res.data
			// 		}
			// 	})
			// },
			
			addUser(){
				var that = this;
				let userIdList = '';
				that.personList.map(item => {
				  if (item.checked) {
					  userIdList = item.id
				    // userIdList.push(item.id)
				  }
				})
				uni.$emit('add', {  //add是上个页面的函数 用于页面间的通信
					data: this.personList,
					numID:userIdList
				})
				
				this.goBack()
			},
			searchV(val){
					this.$api.reqApi.userListAll(val).then(res => {
						if(res.code == 200){
							this.personList = res.data
						}
					})
				}
				
			
		},
		mounted() {
			 // this.userAll()
			 // uni.$on('userAll',(info)=>{  //开启监听全局的地址改变事件
				// this.avList = info
				// console.log(this.avList)
			 // })
		}
	}
</script>

<style lang="scss" scoped>
.content{
	margin: 0 30rpx;
margin-top:40rpx
}
uni-page-body{
	background-color: #fff;
}
.selList {
	margin: 20rpx 0;
	li{
		color: #606266;
		line-height: 80rpx;
		border-bottom: 1px solid #ddd;
		display: flex;
		align-items: center;
		span{
			flex: 1;
		}
		img{
			width: 48rpx;
			height: 48rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}
		&.active{
			color: rgb(39, 127, 230);
		}
	}
}
</style>
